<template>
  <a-form ref="form" :model="formData" layout="vertical">
    <div class="form__box">
      <a-form-item :label="`数据绑定key`" field="dataIndex">
        <template v-if="dataObj.mode === 'dataView'">
          <a-select
            v-model="formData.dataViewSel"
            allow-clear
            @change="changeDataViewSel"
          >
            <a-option value="手填">手填</a-option>
            <a-option
              v-for="option in dataObj.queryGroupList"
              :key="option.groupId + ' ' + option.queryKey"
              :value="option.groupId + ' ' + option.queryKey"
              :disabled="
                dataObj.pageData.some(
                  (item) =>
                    item.formData.dataIndex ===
                    option.groupId + ' ' + option.queryKey
                )
              "
              :title="
                (option.formName
                  ? `${option.formName}_${option.columnName}`
                  : option.columnName) +
                (option.aggregateId
                  ? `（${option.funColumnAs}的函数条件）`
                  : '')
              "
              >{{
                option.formName
                  ? `${option.formName}_${option.columnName}`
                  : option.columnName
              }}{{
                option.aggregateId ? `（${option.funColumnAs}函数条件）` : ""
              }}</a-option
            >
          </a-select>
          <a-input
            v-model="formData.dataIndex"
            :disabled="formData.dataViewSel !== '手填'"
          ></a-input>
        </template>
        <a-input
          v-else
          v-model="formData.dataIndex"
          :disabled="formData.notMod"
        ></a-input>
        <field-linkage :formData="formData"></field-linkage>
      </a-form-item>
      <a-form-item :label="`字段名称`" field="name">
        <a-input v-model="formData.name"></a-input>
        <a-checkbox v-model="formData.hideTitle">隐藏标题</a-checkbox>
      </a-form-item>
      <a-form-item :label="`控件类型`" field="type">
        <a-select
          v-model="formData.type"
          @change="changeControlTypes($event, formData)"
        >
          <a-option
            :value="item.value"
            v-for="item in typeOptions"
            :key="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`数据类型`" field="dataType">
        <a-select v-model="formData.dataType">
          <a-option
            :value="item.value"
            v-for="item in dataTypeOptions"
            :key="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`内容提示`" field="placeholder">
        <a-input v-model="formData.placeholder"></a-input>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="wrapperCol">
        <a-input-number
          :step="1"
          :max="24"
          :min="6"
          v-model="formData.wrapperCol"
        ></a-input-number>
      </a-form-item>
      <a-form-item :label="`选择内容`" field="defaultValue">
        <div class="opts_chunk">
          <a-radio-group v-model="formData.defaultValue">
            <a-radio
              v-for="item in formData.opts"
              style="width: 100%"
              :key="`${item.key}`"
              :value="`${item.value}`"
            >
              <!-- {{ item.value }} -->
              <a-input v-model="item.value" class="radio_input"></a-input>
              <icon-delete class="del_icon" @click="delOption(item.key)" />
            </a-radio>
          </a-radio-group>
        </div>
        <div style="width: 98%; display: flex">
          <a-input
            v-model="formData.selectText"
            style="margin-left: 5px; margin-right: 5px"
            placeholder="请输入选项"
          >
          </a-input>
          <a-button @click="addOption">添加</a-button>
        </div>
      </a-form-item>
      <!--      <a-form-item :label="`默认值`" :field="`defaultValue`">-->
      <!--        <a-input v-model="formData.defaultValue"></a-input>-->
      <!--      </a-form-item>-->
      <a-form-item :label="`展示属性`" field="listStyleShow">
        <a-select v-model="formData.listStyleShow">
          <a-option value="text">文字展示</a-option>
          <a-option value="tag">标签展示</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="`标签颜色`"
        v-if="formData.listStyleShow === 'tag'"
        field="tagColor"
      >
        <a-select v-model="formData.tagColor">
          <a-option
            :value="item.value"
            v-for="item in tagColorList"
            :key="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`操作属性`">
        <a-checkbox v-model="formData.hide">隐藏</a-checkbox>
        <a-checkbox v-model="formData.disabled">禁用</a-checkbox>
        <a-checkbox v-model="formData.desensitization">脱敏</a-checkbox>
      </a-form-item>
      <a-form-item :label="`校验`" field="required">
        <a-checkbox v-model="formData.required">必填</a-checkbox>
        <validate-key
          v-if="formData.required"
          :form-data="formData"
        ></validate-key>
      </a-form-item>
      <a-form-item :label="`字段说明`" field="explain">
        <a-textarea v-model="formData.explain">必填</a-textarea>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { nanoid } from "nanoid";
import {
  basicDefaultData,
  tagColorList,
  typeOptions,
} from "@/components/Form/base/options";
import FieldLinkage from "@/components/Form/base/fieldLinkage.vue";
import ValidateKey from "@/components/Form/base/validateKey.vue";
import { changeControlTypes, changeDataViewSel } from "@/mixins/methodsMixins";

export const defaultData = () => ({
  ...basicDefaultData(),
  dataIndex: "",
  name: "单选框",
  placeholder: "",
  type: "radio",
  opts: [],
  defaultValue: "",
  wrapperCol: 24,
});
export const dataTypeOptions = [
  {
    label: "string",
    value: "string",
  },
  {
    label: "long",
    value: "long",
  },
  {
    label: "int",
    value: "int",
  },
  {
    label: "float",
    value: "float",
  },
  {
    label: "double",
    value: "double",
  },
];
export default {
  name: "RadioInfo",
  components: { ValidateKey, FieldLinkage },
  inject: ["dataObj"],
  data() {
    return {
      rules: {
        name: [{ required: true, message: "必填" }],
      },
      dataTypeOptions,
      tagColorList,
      typeOptions,
    };
  },
  computed: {
    formData() {
      return this.dataObj.pageData[this.dataObj.selectIndex]?.formData || {};
    },
  },
  watch: {
    formData: {
      immediate: true,
      handler(newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData =
            defaultData();
        }
      },
    },
  },
  methods: {
    changeDataViewSel,
    changeControlTypes,
    onOptsChange(e) {
      console.log(e);
      // this.formData.defaultValue =
    },
    addOption() {
      if (this.formData.selectText) {
        if (!this.formData.opts) {
          this.formData.opts = [];
        }
        this.formData.opts.push({
          key: nanoid(),
          value: this.formData.selectText,
        });
        this.formData.selectText = "";
      }
    },
    delOption(key) {
      const index = this.formData.opts.findIndex((item) => item.key === key);
      console.log(key, index);
      this.formData.opts.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="less">
.opts_chunk {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  /deep/ .arco-radio-group {
    width: 100%;
  }
  .radio_input {
    width: 150px;
    margin-bottom: 5px;
  }
  .del_icon {
    // color: red;
    font-size: 16px;
    position: absolute;
    right: 10px;
    cursor: pointer;
    line-height: 35px;
  }
  .del_icon:hover {
    color: red;
  }
}
</style>
